创建第一个应用

这里我们将引导您从一个简单的对话框开始，然后添加更多简单控件，并使之与用户产生交互，从而开启您的Cumulia WUI之旅。

创建一个对话框

下面的代码中，您创建了一个Dialog对象，然后定义了它的名称和大小，并且打开它。

import { Dialog, Size } from 'wui.basic';
import "./theme";

const dialog = new Dialog();
dialog.title = 'Dialog';
dialog.size = new Size(320, 240);

dialog.open();

将您写的ts文件关联到html文件中，即可得到一个包含对话框的网页。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
</head>

<body>
  <script type="module" src="./dialog.ts"></script>
</body>

</html>

添加关闭按钮

为了能手动关闭这个对话框，我们需要添加一个关闭按钮。实现的方法就是使用addButtonbutton函数新建一个button，这个函数允许您在新建按钮的同时，为按钮的clicked信号绑定一个响应函数。这里，我们将相应函数定义为：关闭对话框。

const dialog = new Dialog();
dialog.title = 'Dialog';
dialog.size = new Size(320, 240);

// 为对话框添加关闭按钮
dialog.addButton('Close', (): void => {
    dialog.close();
});

dialog.open();

控件的信号响应

在很多应用中，有这样的业务逻辑：当用户与一个控件交互时，会引起其他控件的响应。那么在这一步，我们假设这样一个需求：用户在点击按钮My Button时，文字发生变化。下面是实现这个简单需求的代码。

为这个按钮的clicked信号绑定了相应函数：改变label的内容为'Button is clicked!'。bind函数是所有控件具备的方法，它的作用是当控件释放出某个信号时，可以自动执行自定义的响应函数。响应函数一般是用lambda函数定义的。

...
const button = new Button(layout, 'My Button');
const label = new Label(layout, 'Something text');
button.bind('clicked', (): void => {
    label.text = 'Button is clicked!';
});
...

以上的介绍，只是为了让您初步了解一下Cumulia WUI的控件接口，为了全面掌握如何使用它，请您接下来深入阅读关于WUI核心的系列文章。

创建第一个应用

创建一个对话框​

添加关闭按钮​

更多控件​

控件的信号响应​

创建一个对话框

添加关闭按钮

更多控件

控件的信号响应